<template>
  <div class="person">
    <h2>需求：当水温达到60度，或水位达到80cm时，给服务器发请求</h2>
    <h2>当前水温：{{ temp }}度</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">点我水温+10</button>
    <button @click="changeHeight">点我水位+10</button>
  </div>
</template>
<script setup lang="ts">
import { ref, watch ,watchEffect} from 'vue';
const temp = ref(10);
const height = ref(0);
function changeTemp() {
  temp.value += 10;
};
function changeHeight() {
  height.value += 10;
};
// 监视——watch
watch([temp, height], (value) => {
  // 从value中获取最新的水温（newTemp）和水位（newHeight）  
  let [newTemp, newHeight] = value;
  if (newTemp >= 60 || newHeight >= 80) {
    console.log('watch给服务器发请求');
  }
});
// 监视——watchEffect
watchEffect(() => {
  if (temp.value >= 60 || height.value >= 80) {
    console.log('watchEffect给服务器发请求');
  }
}); 
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>